<template>
  <div>
    <a-card>
      <vxe-table
        border
        ref="tableRef"
        :column-config="{ resizable: true }"
        :tree-config="{
          transform: true,
          rowField: 'id',
          parentField: 'pid',
        }"
        :data="tableData"
        @toggle-tree-expand="toggleExpandChangeEvent"
      >
        <vxe-column field="name" title="名称" :tree-node="true"></vxe-column>

        <vxe-column field="icon" title="图标">
          <template #default="{ row }">
            <Icon :icon="row.meta.icon" />
          </template>
        </vxe-column>
        <vxe-column field="type" title="类型">
          <template #default="{ row }">
            <span v-if="row.meta.type === 0">目录</span>
            <span v-if="row.meta.type === 1">菜单</span>
            <span v-if="row.meta.type === 2">权限</span>
          </template>
        </vxe-column>
        <vxe-column field="path" title="路由"></vxe-column>
        <vxe-column field="component" title="文件路径"></vxe-column>
        <vxe-column field="pers" title="权限标识">
          <template #default="{ row }">
            <span v-if="row.meta.type === 2">{{ row.meta.permission }}</span>
          </template>
        </vxe-column>
        <vxe-column field="orderNo" title="排序">
          <template #default="{ row }">
            <span>{{ row.meta.orderNo }}</span>
          </template>
        </vxe-column>
        <vxe-column field="show" title="显示">
          <template #default="{ row }">
            <span>{{ row.meta.show }}</span>
          </template>
        </vxe-column>
        <vxe-column field="status" title="状态">
          <template #default="{ row }">
            <span>{{ row.meta.status }}</span>
          </template>
        </vxe-column>
        <vxe-column field="action" title="操作">
          <template #default="{ row }">
            <a-button-group>
              <a-button type="link" size="small" @click="edit(row)">编辑</a-button>
              <a-button type="link" size="small" @click="add(row)">新增</a-button>
              <a-button type="link" size="small" @click="del(row)">删除</a-button>
            </a-button-group>
          </template>
        </vxe-column>
      </vxe-table>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
import Api from "@/api/backend/api";
const tableRef = ref();

const tableData = ref([]);
onMounted(async () => {
  let data = await Api.menuController.index();
  tableData.value = data;
});
const toggleExpandChangeEvent = (params) => {
  const $table = tableRef.value;
  if ($table) {
    const { row, expanded } = params;
    console.log(
      "节点展开事件",
      expanded,
      "获取父节点：",
      $table.getParentRow(row)
    );
  }
};
const edit = (row) => {
  console.log(row);
};
const add = (row) => {
  console.log(row);
};
const del = (row) => {
  console.log(row);
};
</script>
